fix(components): Hide tooltips when out of view by jdeichert · Pull Request #2894 · GetJobber/atlantis

jdeichert · 2026-01-30T22:55:55Z

Motivations

This PR fixes an issue where tooltips, when out of view, aren't technically hidden and can cause scrollbars unnecessarily.

Using the hide middleware from FloatingUI to handle this, as suggested by @ZakaryH.

Before

Tooltip remains visible when scrolled out of view, leading to the scrollable area increasing.

NOTE: for some reason when the combobox opens, the scrollbar within the story jumps. I can't repro on production, but it DOES happen on our production stories. Seems to be specific to storybook?

Screen.Recording.2026-01-30.at.2.58.54.PM.mov

After

Tooltip no longer is visible when out of view.

Screen.Recording.2026-01-30.at.2.59.10.PM.mov

Changes

Fixed

Hide tooltips when out of view

Testing

Pull this branch
Copy the snippet below into docs/components/Combobox/Web.stories.tsx
Run storybook and visit the new story
Repeat the steps shown in the videos above:
- Scroll down to the combobox, focus it, blur it to close the content
- Scroll up on the inner container and you'll no longer see the tooltip once it is scrolled out of view
- Try forcing isHidden: false, repeat the steps and you'll see the tooltip still visible as it's scrolled outside of the inner container

Snippet...

const ComboboxInScrollableContainer: ComponentStory<typeof Combobox> = args => {
  const [selected, setSelected] = useState<ComboboxOption[]>([]);

  return (
    <div
      style={{
        width: "80%",
        background: "red",
        overflowY: "auto",
        border: "1px solid #ccc",
        padding: "16px",
      }}
    >
      <Page title="Teammates" width="narrow">
        <div style={{ backgroundColor: "blue", height: "100vh" }}>
          <div
            style={{
              height: "200px",
              backgroundColor: "green",
            }}
          />
          <div
            style={{
              height: "200px",
              backgroundColor: "green",
            }}
          />
          <div
            style={{
              height: "200px",
              backgroundColor: "green",
            }}
          />
          <div
            style={{
              height: "200px",
              backgroundColor: "green",
            }}
          />
          <div
            style={{
              height: "200px",
              backgroundColor: "green",
            }}
          />

          <div
            style={{
              maxWidth: "200px",
            }}
          >
            <Combobox
              {...args}
              label="Teammates Teammates Teammates"
              onSelect={setSelected}
              selected={selected}
            >
              <Combobox.Option id="1" label="Bilbo Baggins" />
              <Combobox.Option id="2" label="Frodo Baggins" />
              <Combobox.Option id="3" label="Pippin Took" />
              <Combobox.Option id="4" label="Merry Brandybuck" />
              <Combobox.Option id="5" label="Sam Gamgee" />
              <Combobox.Option id="6" label="Aragorn" />
              <Combobox.Option id="7" label="Gimli" />
              <Combobox.Option id="8" label="Legolas" />
              <Combobox.Option id="9" label="Gandalf" />
              <Combobox.Option id="10" label="Gollum" />

              <Combobox.Action
                label="Add Teammate"
                onClick={() => {
                  alert("Added a new teammate ✅");
                }}
              />
            </Combobox>
          </div>
        </div>
      </Page>
    </div>
  );
};

export const InScrollableContainer = ComboboxInScrollableContainer.bind({});
InScrollableContainer.args = {};

When a tooltip was scrolled out of view, it was still visible. This is now fixed using FloatingUI's `hide()` middleware to detect when it's out of view.

jdeichert · 2026-01-30T22:57:37Z

packages/components/src/Tooltip/Tooltip.tsx

            style={floatingStyles.float}
            ref={setTooltipRef}
            role="tooltip"
+            hidden={isHidden}


Ensures it's hidden from screen readers

cloudflare-workers-and-pages · 2026-01-30T23:03:24Z

Deploying atlantis with Cloudflare Pages

Latest commit:	`24f89c0`
Status:	✅ Deploy successful!
Preview URL:	https://ee485c58.atlantis.pages.dev
Branch Preview URL:	https://job-148568-hide-tooltips-whe.atlantis.pages.dev

View logs

ZakaryH · 2026-02-02T20:28:39Z

I know this fix is for Combobox, even still I wanted to try it on just a Chip to see what happens there and I've realized we almost certainly need some more CSS rules on that. if I put it in

<div style={{ width: 200px }}>
  <Chip label="Something that is clearly going to exceed the dimensions of the parent or container of the Chip" />
</div>

it's not respected and doesn't truncate!

it should be a max-width: 100% or change it to be display: flex. I don't recall why it's inline-flex to begin with 🤔

this isn't directly related, since the Combobox's setup accounts for this, so I'm fine with doing this in a different PR.

jdeichert · 2026-02-02T20:31:01Z

it's not respected and doesn't truncate!

it should be a max-width: 100% or change it to be display: flex. I don't recall why it's inline-flex to begin with 🤔

this isn't directly related, since the Combobox's setup accounts for this, so I'm fine with doing this in a different PR.

I can log a bug ticket for that. Indeed that sounds like it's outside the scope of this Tooltip issue.

ZakaryH · 2026-02-02T23:31:19Z

these changes make sense, though I haven't tried it in product to see if it solves the initial issue or not.

I'm also realizing that we could improve this further by using useFocus and useHover to trigger the tooltip's open state, get rid of our handlers, and use proper conditional rendering passing an open value to useFloating.

also, the whileElementsMounted we have can be overly aggressive in some scenarios such as having the element focused, but then scrolling around. we'll see a ton of logging because it's still rendered....

I don't expect that to happen often though, and it's an existing problem.

ZakaryH

LGTM, the only thing I would ask for are some visual regression tests. still happy to approve without them though.

jdeichert · 2026-02-05T20:22:58Z

packages/site/src/pages/visualTests/VisualTestTooltipPage.tsx

@@ -1,88 +1,59 @@
-import {


@ZakaryH I updated the tooltip tests as discussed.

I broke it into 2 commits:

with my fix disabled, so it's the before state: eb0c2ed

with my fix enabled, and you can see the offscreen tooltip is no more! 24f89c0

Demo is here if you want to test while running the docs site: http://localhost:5173/visual-tests/tooltip

Before After

ZakaryH

still LGTM thanks for adding the tests!

jdeichert added 3 commits January 30, 2026 14:53

Add tests to verify hidden behaviour

a92d986

Hide tooltips when they go out of view

31920c3

When a tooltip was scrolled out of view, it was still visible. This is now fixed using FloatingUI's `hide()` middleware to detect when it's out of view.

Add hidden attribute for accessibility

b382854

jdeichert commented Jan 30, 2026

View reviewed changes

jdeichert marked this pull request as ready for review January 30, 2026 23:10

jdeichert requested a review from a team as a code owner January 30, 2026 23:10

jobbiebot bot added review requested Team UX Foundations labels Jan 30, 2026

ZakaryH approved these changes Feb 2, 2026

View reviewed changes

jobbiebot bot added approved and removed review requested labels Feb 2, 2026

jdeichert added 2 commits February 5, 2026 12:13

Add thorough tooltip tests (with fix disabled)

eb0c2ed

Update screenshots (with fix re-enabled)

24f89c0

jdeichert commented Feb 5, 2026

View reviewed changes

jdeichert requested a review from ZakaryH February 5, 2026 20:31

jobbiebot bot added the review requested label Feb 5, 2026

ZakaryH approved these changes Feb 6, 2026

View reviewed changes

jobbiebot bot removed the review requested label Feb 6, 2026

ZakaryH merged commit 0299b36 into master Feb 6, 2026
15 checks passed

ZakaryH deleted the JOB-148568/hide-tooltips-when-out-of-view branch February 6, 2026 19:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(components): Hide tooltips when out of view#2894

fix(components): Hide tooltips when out of view#2894
ZakaryH merged 5 commits intomasterfrom
JOB-148568/hide-tooltips-when-out-of-view

jdeichert commented Jan 30, 2026 •

edited

Loading

Uh oh!

jdeichert Jan 30, 2026

Uh oh!

cloudflare-workers-and-pages bot commented Jan 30, 2026 •

edited

Loading

Uh oh!

ZakaryH commented Feb 2, 2026

Uh oh!

jdeichert commented Feb 2, 2026

Uh oh!

ZakaryH commented Feb 2, 2026

Uh oh!

ZakaryH left a comment

Uh oh!

jdeichert Feb 5, 2026 •

edited

Loading

Uh oh!

jdeichert Feb 5, 2026

Uh oh!

ZakaryH left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

Conversation

jdeichert commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivations

Before

After

Changes

Fixed

Testing

Uh oh!

jdeichert Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

cloudflare-workers-and-pages bot commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying atlantis with Cloudflare Pages

Uh oh!

ZakaryH commented Feb 2, 2026

Uh oh!

jdeichert commented Feb 2, 2026

Uh oh!

ZakaryH commented Feb 2, 2026

Uh oh!

ZakaryH left a comment

Choose a reason for hiding this comment

Uh oh!

jdeichert Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jdeichert Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

ZakaryH left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

jdeichert commented Jan 30, 2026 •

edited

Loading

cloudflare-workers-and-pages bot commented Jan 30, 2026 •

edited

Loading

jdeichert Feb 5, 2026 •

edited

Loading